<template>
  <el-card class="form-container" shadow="never">
    <el-form :model="meal" ref="mealFrom" :rules="rules" label-width="150px" size="small">
      <el-form-item label="套餐名称:" prop="mealName">
        <el-input v-model="meal.mealName" class="input-width"></el-input>
      </el-form-item>
      <el-form-item label="套餐图片:">
        <single-upload v-model="meal.picUrl"></single-upload>
      </el-form-item>
      <el-form-item label="电子协议模板:">
        <single-upload v-model="meal.contractUrl"></single-upload>
      </el-form-item>
      <el-form-item label="套餐价格:" prop="price">
        <el-input v-model="meal.price" class="input-width"></el-input>
      </el-form-item>
      <el-form-item label="套餐详情:">
        <!-- <el-input v-model="meal.mealDetail" class="input-width"></el-input> -->
        <tinymce
          :width="500"
          :height="300"
          v-model="meal.mealDetail"
        ></tinymce>
      </el-form-item>
      <el-form-item label="费用包含:">
        <el-input v-model="meal.costInclude" class="input-width"></el-input>
      </el-form-item>
      <el-form-item label="服务承诺:">
        <el-input v-model="meal.promise" class="input-width"></el-input>
      </el-form-item>
      <el-form-item label="标签1:" prop="tag1">
        <el-input v-model="meal.tag1" class="input-width"></el-input>
      </el-form-item>
      <el-form-item label="标签2:" prop="tag2">
        <el-input v-model="meal.tag2" class="input-width"></el-input>
      </el-form-item>
      <el-form-item label="标签3:" prop="tag3">
        <el-input v-model="meal.tag3" class="input-width"></el-input>
      </el-form-item>
      <el-form-item label="排序：">
        <el-input v-model="meal.sort" class="input-width"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('mealFrom')">提交</el-button>
        <el-button v-if="!isEdit" @click="resetForm('mealFrom')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script>
import SingleUpload from "@/components/Upload/singleUpload";
import Tinymce from "@/components/Tinymce";
import { createMeal, updateMeal, getMeal } from "@/api/dms/meal";

const defaultMeal = {
  mealName: "",
  price: null,
  mealDetail: null,
  costInclude: null,
  promise: null,
  commissionRatio: 0,
  sort: 0
};

export default {
  name: "mealDetail",
  components: { SingleUpload,Tinymce },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      meal: {},
      rules: {
        mealName: [
          { required: true, message: "班型名不能为空.", trigger: "blur" }
        ],
        price: [
          { required: true, message: "班型价格不能为空.", trigger: "blur" }
        ],
        tag1: [
          { required: true, message: "标签1不能为空.", trigger: "blur" }
        ],
        tag2: [
          { required: true, message: "标签2不能为空.", trigger: "blur" }
        ],
        tag3: [
          { required: true, message: "标签3不能为空.", trigger: "blur" }
        ]
      },
      isPromoterGood: false
    };
  },
  created() {
    if (this.isEdit) {
      getMeal(this.$route.query.id).then(response => {
        this.meal = response.data;
        if (this.meal.isPromoterGood == 1) {
          this.isPromoterGood = true;
        } else {
          this.isPromoterGood = false;
        }
      });
    } else {
      this.meal = Object.assign({}, defaultMeal);
    }
  },
  methods: {
    handleStatusChange(val) {
      console.log(val);
      if (val == true) {
        this.meal.isPromoterGood = 1;
      } else {
        this.meal.isPromoterGood = 0;
      }
    },
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$confirm("是否提交数据", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            if (this.isEdit) {
              updateMeal(this.$route.query.id, this.meal).then(response => {
                this.$refs[formName].resetFields();
                this.$message({
                  message: "修改成功",
                  type: "success",
                  duration: 1000
                });
                this.$router.back();
              });
            } else {
              createMeal(this.meal).then(response => {
                this.$refs[formName].resetFields();
                this.meal = Object.assign({}, defaultMeal);
                this.$message({
                  message: "提交成功",
                  type: "success",
                  duration: 1000
                });
              });
            }
          });
        } else {
          this.$message({
            message: "验证失败",
            type: "error",
            duration: 1000
          });
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.meal = Object.assign({}, defaultMeal);
    }
  }
};
</script>
<style scoped>
.input-width {
  width: 70%;
}
</style>


